<template>
  <el-container>
    <!-- 头部 -->
    <div id="bmap" class="bm-view"></div>
    <div class="abs left">
      <el-row>
        <el-col :span="24">
          <div>【项目信息】</div>
        </el-col>
      </el-row>
      <el-input
        placeholder="项目信息列表"
        v-model="filterText"
        suffix-icon="el-icon-search"
      >
      </el-input>
      <el-scrollbar style="height: 490px">
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          node-key="idx"
          :default-expanded-keys="[num]"
          accordion
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="setCentPoint"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <i :class="data.icon" :style="{ color: data.color }"></i
              >{{ node.label }}
            </span>
          </span>
        </el-tree>
      </el-scrollbar>
      <Weather></Weather>
    </div>
    <div class="abs right">
      <SiteOnline></SiteOnline>
      <WarningStatistics></WarningStatistics>
      <OverRun></OverRun>
    </div>
  </el-container>
</template>

<script>
import Weather from "@/components/Weathers";
import SiteOnline from "@/components/SiteOnlines";
import WarningStatistics from "@/components/WarningStatisticss";
import OverRun from "@/components/OverRuns";
import * as Axios from "../../api/myAxios";
import { kkCreateMap } from "../../api/action";
import { mapState } from "vuex";
export default {
  name: "SiteDistribution",
  components: {
    Weather,
    SiteOnline,
    WarningStatistics,
    OverRun,
  },
  data() {
    return {
      filterText: "",
      data: [],
      kkRes: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
      map: null,
      bmap: null,
      point: "",
      lists: [],
      mapMarkList: {
        dipperTest: [], // 北斗
        groundTest: [], // 岩土
        weatheTest: [], // 气象检测
      },
      defaultPoint: {
        lng: null,
        lat: null,
        centerZoom: null,
      },
      show: false,
      position: {},
      num: null,
    };
  },
  beforeCreate() {
    this.openLoading();
  },
  created() {
    Axios.post().then((res) => {
      this.kkRes = res.data.parameter.list;
      let url = window.location.href;
      let id;
      if (this.kkRes.length == 1) {
        id = "1";
      } else {
        id = url.split("?")[1].split("=")[1];
      }
      switch (id) {
        case "1":
          this.defaultPoint.lng = this.kkRes[0].longitude;
          this.defaultPoint.lat = this.kkRes[0].latitude;
          this.defaultPoint.centerZoom = this.kkRes[0].defaultMapLevel - 1;
          this.num = this.kkRes[0].id;
          this.$store.dispatch("getNav", id);
          break;
        case "2":
          this.defaultPoint.lng = this.kkRes[1].longitude;
          this.defaultPoint.lat = this.kkRes[1].latitude;
          this.defaultPoint.centerZoom = this.kkRes[1].defaultMapLevel;
          this.num = 2;
          this.$store.dispatch("getNav", id);
          break;
        case "3":
          this.defaultPoint.lng = this.kkRes[2].longitude;
          this.defaultPoint.lat = this.kkRes[2].latitude;
          this.defaultPoint.centerZoom = this.kkRes[2].defaultMapLevel;
          this.num = 3;
          this.$store.dispatch("getNav", id);
          break;
        case "4":
          this.defaultPoint.lng = this.kkRes[3].longitude;
          this.defaultPoint.lat = this.kkRes[3].latitude;
          this.defaultPoint.centerZoom = this.kkRes[3].defaultMapLevel;
          this.num = 4;
          this.$store.dispatch("getNav", id);
      }
      kkCreateMap.defaultInfo.lat = this.defaultPoint.lat;
      kkCreateMap.defaultInfo.lng = this.defaultPoint.lng;
      kkCreateMap.defaultInfo.defaultMapLevel = this.defaultPoint.centerZoom;
      const mapDom = document.getElementById("bmap");
      kkCreateMap.init(mapDom);
      let inter = setInterval(() => {
        if (this.kkRes !== null) {
          kkCreateMap.setPointList(this.kkRes);
          clearInterval(inter);
        }
      });
      let siderList = [];
      for (let i = 0; i < this.kkRes.length; i++) {
        siderList.push({
          idx: this.kkRes[i].id,
          label: this.kkRes[i].monitorName,
          children: [
            { label: "北斗监测", children: [] },
            { label: "岩土监测", children: [] },
            { label: "气象监测", children: [] },
          ],
        });
        let siderListChildren = this.kkRes[i].sensorList;
        for (let k = 0; k < siderListChildren.length; k++) {
          siderListChildren[k].moduleEnum === "00" &&
          siderListChildren[k].sensorStatus === "10"
            ? siderList[i].children[0].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-weixing-copy",
                color: "green",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "00" &&
              siderListChildren[k].sensorStatus === "30"
            ? siderList[i].children[0].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-weixing-copy",
                color: "grey",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "00" &&
              siderListChildren[k].sensorStatus === "20"
            ? siderList[i].children[0].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-weixing-copy",
                color: "yellow",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "01" &&
              siderListChildren[k].sensorStatus === "10"
            ? siderList[i].children[1].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "green",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "01" &&
              siderListChildren[k].sensorStatus === "30"
            ? siderList[i].children[1].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "grey",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "01" &&
              siderListChildren[k].sensorStatus === "20"
            ? siderList[i].children[1].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "yellow",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "02" &&
              siderListChildren[k].sensorStatus === "10"
            ? siderList[i].children[2].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-qixiang",
                color: "green",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "02" &&
              siderListChildren[k].sensorStatus === "20"
            ? siderList[i].children[2].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-qixiang",
                color: "yellow",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderList[i].children[2].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-qixiang",
                color: "grey",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                showDate: siderListChildren[k].showDate,
                moduleEnum: siderListChildren[k].moduleEnum,
                sensorNumber1: siderListChildren[k].sensorNumber1,
                sensorNumber2: siderListChildren[k].sensorNumber2,
                sensorNumber3: siderListChildren[k].sensorNumber3,
                sensorNumber4: siderListChildren[k].sensorNumber4,
                sensorNumber5: siderListChildren[k].sensorNumber5,
                sensorNumber6: siderListChildren[k].sensorNumber6,
                sensorNumber: siderListChildren[k].sensorNumber,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              });
        }
      }
      this.data = siderList;
    });
  },
  mounted() {
    this.$store.dispatch("getData").then(() => {
      window.localStorage.setItem(
        "treeData",
        JSON.stringify({ treeData: this.treeData })
      );
    });
    this.expandRoot();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    expandRoot() {
      if (this.$refs.tree.root.childNodes) {
        this.$refs.tree.root.expanded = true;
        this.$refs.tree.root.childNodes.forEach(
          (node) => (node.expanded = true)
        );
      }
    },
    setCentPoint(event, selected) {
      let parameter = {
        id: null,
        moduleEnum: null,
        longitude: null,
        latitude: null,
        sensorName: null,
        showDate: null,
        longitude1: null,
        latitude1: null,
        longitude2: null,
        latitude2: null,
        longitude3: null,
        latitude3: null,
        sensorNumber1: null,
        sensorNumber2: null,
        sensorNumber3: null,
        sensorNumber4: null,
        sensorNumber5: null,
        sensorNumber6: null,
        sensorNumber: null,
        monitorId: null,
      };
      /* 选中节点的id */

      parameter.id = event.id;
      //监测主题
      parameter.moduleEnum = event.moduleEnum;
      //经度
      parameter.longitude = event.longitude;
      //纬度
      parameter.latitude = event.latitude;
      //传感器名
      parameter.sensorName = event.sensorName;
      //展示数据
      parameter.showDate = event.showDate;
      parameter.sensorNumber1 = event.sensorNumber1;
      parameter.sensorNumber2 = event.sensorNumber2;
      parameter.sensorNumber3 = event.sensorNumber3;
      parameter.sensorNumber4 = event.sensorNumber4;
      parameter.sensorNumber5 = event.sensorNumber5;
      parameter.sensorNumber6 = event.sensorNumber6;
      parameter.longitude1 = event.longitude1;
      parameter.latitude1 = event.latitude1;
      parameter.longitude2 = event.longitude2;
      parameter.latitude2 = event.latitude2;
      parameter.longitude3 = event.longitude3;
      parameter.latitude3 = event.latitude3;
      parameter.sensorNumber = event.sensorNumber;
      parameter.monitorId = event.monitorId;
      kkCreateMap.setMapCenter(parameter);
      this.$store.dispatch("getChart", event.baseId);
    },
  },
  computed: {
    ...mapState(["treeData"]),
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>

<style lang='less' scoped>
.el-container {
  width: 100%;
  height: 100%;
  .bm-view {
    width: 100%;
    height: 100%;
    /deep/ .anchorBL {
      display: none;
      visibility: hidden;
    }
  }
  .abs {
    position: absolute;
  }
  .el-col > div {
    text-align: center;
    width: 70%;
    line-height: 35px;
    background: rgba(107, 151, 160, 0.5);
    color: #15f7ff;
    font-size: 22px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .left {
    left: 0;
    top: 6.4%;
    width: 16%;
    height: 93.6%;
    background: linear-gradient(to right, rgb(15, 14, 14), transparent);
  }
  .el-input {
    width: 80%;
    margin: 10px 0;
    margin-left: 20px;
  }
  .el-input /deep/ .el-input__inner {
    color: white;
    background-color: transparent;
  }
  .el-scrollbar /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-tree {
    background-color: transparent;
    color: white;
    margin-left: 30px;
  }
  .el-tree /deep/ .el-tree-node__content:hover {
    background: transparent;
  }
  .el-tree /deep/ .el-tree-node:focus > .el-tree-node__content {
    background: transparent;
  }
  .el-tree /deep/ .custom-tree-node:hover {
    background-color: #d0c199;
  }
  .el-tree
    /deep/
    .el-tree-node:focus
    > .el-tree-node__content
    .custom-tree-node {
    background-color: #31554c;
  }
  /* .el-tree /deep/ .el-tree-node__expand-icon::before {
    display: none;
  } */
  .right {
    right: 0;
    top: 6.4%;
    width: 16%;
    height: 93.6%;
    /* border: 1px solid green; */
    background: linear-gradient(to left, rgb(15, 14, 14), transparent);
    overflow: hidden;
  }
}
</style>